<!--Echart扩展配置-->

<template>
  <div class="custom-option-document">
    <p>可以通过编写Echarts支持的OPTION语法来扩展图表的展示效果，可以点击【显示当前图表最终的OPTION对象】按钮来查看当前组件构建出的OPTION对象，
      然后根据需要编写自定义配置，自定义的配置将自动与图表构建出的OPTION进行合并覆盖。</p>
    <div class="btn" @click.stop="btnClickHandler">显示当前图表最终的OPTION对象</div>
    <div v-show="showDataZoomConfigBtn" class="btn m-t-5px" @click.stop="dataZoomConfigModalVisible = !dataZoomConfigModalVisible">海量数据区域缩放组件配置</div>

    <Modal
        v-model="dataZoomConfigModalVisible"
        width="800"
        title="数据区域缩放组件配置">
      <div class="data-zoom-config-modal-panel">
        <div class="left-container">
          <div id="demoChart"></div>
        </div>
        <div class="right-container">
          <Form :label-width="100">
            <FormItem label="指向目标轴">
              <Select :transfer="true" size="small" v-model="dataZoomOption.dataZoomTargetAxis">
                <Option v-for="item in dataZoomTargetAxiss" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItemPanel v-show="dataZoomOption.dataZoomTargetAxis == 'x'" title="目标轴为x轴时">
              <FormItem label="对应x轴索引值">
                <InputNumber size="small" :max="2" :min="0" v-model="dataZoomOption.xAxisIndex"/>
              </FormItem>
              <FormItem label="组件高度">
                <InputNumber size="small" :max="1000" :min="0" v-model="dataZoomOption.height"/>
              </FormItem>
            </FormItemPanel>
            <FormItemPanel v-show="dataZoomOption.dataZoomTargetAxis == 'y'" title="目标轴为y轴时">
              <FormItem label="对应y轴索引值">
                <InputNumber size="small" :max="2" :min="0" v-model="dataZoomOption.yAxisIndex"/>
              </FormItem>
              <FormItem label="组件宽度">
                <InputNumber size="small" :max="1000" :min="0" v-model="dataZoomOption.width"/>
              </FormItem>
            </FormItemPanel>
            <FormItem label="默认范围">
              <Slider v-model="dataZoomOption.dataZoomRange" :max="100" :min="0" :step="10" range style="width: 200px;"></Slider>
            </FormItem>
            <!--<FormItem label="高度">
              <InputNumber size="small" :max="1000" :min="0" v-model="dataZoomChartOption.dataZoom[0].height"/>
            </FormItem>
            <FormItem label="下边距">
              <InputNumber size="small" :max="1000" :min="-1000" v-model="dataZoomChartOption.dataZoom[0].bottom"/>
            </FormItem>-->
            <FormItem label="背景色">
              <PnColorPicker size="small" v-model="dataZoomOption.backgroundColor" alpha recommend/>
            </FormItem>
            <FormItem label="选中范围颜色">
              <PnColorPicker size="small" v-model="dataZoomOption.fillerColor" alpha recommend/>
            </FormItem>
            <FormItem label="边框颜色">
              <PnColorPicker size="small" v-model="dataZoomOption.borderColor" alpha recommend/>
            </FormItem>
            <FormItem label="文本色">
              <PnColorPicker size="small" v-model="dataZoomOption.textStyle.color" alpha recommend/>
            </FormItem>
            <FormItemPanel title="数据阴影样式">
              <FormItem label="区域颜色">
                <PnColorPicker size="small" v-model="dataZoomOption.dataBackground.areaStyle.color" alpha recommend/>
              </FormItem>
              <FormItem label="边框颜色">
                <PnColorPicker size="small" v-model="dataZoomOption.dataBackground.lineStyle.color" alpha recommend/>
              </FormItem>
              <FormItem label="边框宽度">
                <InputNumber size="small" :max="1000" :min="0" v-model="dataZoomOption.dataBackground.lineStyle.width"/>
              </FormItem>
            </FormItemPanel>
            <FormItemPanel title="手柄样式">
              <FormItem label="颜色">
                <PnColorPicker size="small" v-model="dataZoomOption.handleStyle.color" alpha recommend/>
              </FormItem>
            </FormItemPanel>
          </Form>

        </div>
      </div>
      <div slot="footer">
        <Button type="default" @click="deleteDataZoomFromCustomOption">删除组件</Button>
        <Button type="primary" @click="setDataZoomToCustomOption">生成组件</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import { createHelpers } from 'vuex-map-fields';
  const { mapFields } = createHelpers({
    getterType: 'designer/getField',
    mutationType: 'designer/updateField',
  });

  export default {
    props: {
      componentId: {
        type: String,
        default: ''
      },
      customOption: {
        type: String
      },
      showDataZoomConfigBtn: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        dataZoomConfigModalVisible: false,
        demoChart: null,
        dataZoomOption: {
          dataZoomRange: [0, 100],

          dataZoomTargetAxis: 'x',
          xAxisIndex: 0,
          yAxisIndex: 0,
          width: 20,
          height: 20,

          backgroundColor: 'rgba(47,69,84,0)',
          dataBackground: {
            lineStyle: {
              color: '#424242',
              width: 1
            },
            areaStyle: {
              color: '#e0e0e0'
            }
          },
          fillerColor: 'rgba(167,183,204,0.4)',
          handleStyle: {
            color: '#a7b7cc'
          },
          textStyle: {
            color: '#fff'
          },
          borderColor: '#90979c'
        },
        dataZoomTargetAxiss: [
          {label: 'x轴', value: 'x'},
          {label: 'y轴', value: 'y'}
        ],
      }
    },
    mounted() {

    },
    methods: {
      btnClickHandler () {
        this.$EventBus.$emit('pn_showEchartsChartOption', this.componentId)
      },
      deleteDataZoomFromCustomOption () {
        let customOption = JSON.parse(this.customOption);
        if (customOption.dataZoom) {
          this.$Modal.confirm({
            title: '提醒',
            content: '确认要删除当前组件所使用的数据区域缩放组件吗？',
            onOk: () => {
              delete customOption.dataZoom;
              this.$EventBus.$emit('pn_setDataZoomToCustomOption', JSON.stringify(customOption, null, 2));
              this.dataZoomConfigModalVisible = false
            }
          });
        }else {
          this.dataZoomConfigModalVisible = false
        }
      },
      setDataZoomToCustomOption () {
        let customOption = JSON.parse(this.customOption);
        customOption.dataZoom = this.chartOption.dataZoom;
        this.$EventBus.$emit('pn_setDataZoomToCustomOption', JSON.stringify(customOption, null, 2));
        this.dataZoomConfigModalVisible = false
      }
    },
    computed: {
      ...mapFields({
        layout: 'pageMetadata.layout'
      }),
      chartOption () {
        let option = {
          dataZoom: [
            {
              show: true,
              backgroundColor: this.dataZoomOption.backgroundColor,
              dataBackground: {
                lineStyle: {
                  color: this.dataZoomOption.dataBackground.lineStyle.color,
                  width: this.dataZoomOption.dataBackground.lineStyle.width
                },
                areaStyle: {
                  color: this.dataZoomOption.dataBackground.areaStyle.color
                }
              },
              fillerColor: this.dataZoomOption.fillerColor,
              handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
              handleSize: '110%',
              handleStyle: {
                color: this.dataZoomOption.handleStyle.color
              },
              textStyle: {
                color: this.dataZoomOption.textStyle.color
              },
              borderColor: this.dataZoomOption.borderColor
            }
          ],
          title: {
            show: true,
            text: '示例图表',
            textStyle: {
              color: '#fff'
            }
          },
          backgroundColor: this.layout.layoutConfigData.backgroundColor,
          color: ['#2196f3'],
          grid: {
            left: 40,
            right: 40,
            bottom: 80
          },
          xAxis: {
            show: false,
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            show: false,
            type: 'value'
          },
          series: [
            {
              type: 'bar',
              barWidth: '60%',
              data: [10, 52, 200, 334, 390, 330, 220]
            }
          ]
        };

        if (this.dataZoomOption.dataZoomTargetAxis == 'x') {
          option.dataZoom[0].xAxisIndex = this.dataZoomOption.xAxisIndex;
          option.dataZoom[0].height = this.dataZoomOption.height
        }else if (this.dataZoomOption.dataZoomTargetAxis == 'y') {
          option.dataZoom[0].yAxisIndex = this.dataZoomOption.yAxisIndex;
          option.dataZoom[0].width = this.dataZoomOption.width
        }

        option.dataZoom[0].start = this.dataZoomOption.dataZoomRange[0];
        option.dataZoom[0].end = this.dataZoomOption.dataZoomRange[1];
        return option
      }
    },
    watch: {
      'dataZoomConfigModalVisible': {
        handler: function (val) {
          if (val) {
            this.demoChart = this.$Echarts.init(document.getElementById('demoChart'), null, {width: 385, height: 450});
            this.demoChart.setOption(this.chartOption)
          }else {
            if (this.demoChart) {
              this.demoChart.dispose()
            }
          }
        }
      },
      'dataZoomOption': {
        handler: function () {
          this.demoChart.setOption(this.chartOption, true)
        },
        deep: true
      }
    }
  }
</script>

<style lang="less" scoped>
  .custom-option-document {
    background-color: #616161;
    border: 1px solid #424242;
    padding: 10px;
    color: #fff;
    p {
      text-align: justify;
      margin-bottom: 5px;
    }
    .btn {
      padding: 10px;
      background-color: #2196f3;
      cursor: pointer;
      text-align: center;
      border-radius: 4px;
      &:hover {
        background-color: #1e88e5;
      }
    }
  }

  .data-zoom-config-modal-panel {
    width: 100%;
    height: 450px;
    .left-container {
      width: 50%;
      height: 100%;
      float: left;
    }
    .right-container {
      width: 50%;
      height: 100%;
      float: left;
      box-sizing: border-box;
      padding-left: 10px;
      padding-right: 10px;
      overflow-y: auto;
    }
  }

  .ivu-form-item {
    margin-bottom: 0px;
  }
</style>
